<!--  -->
<template>
  <div class="Home_box">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, indexs) in Swiper_List" :key="indexs">
        <img :src="item.banner_img" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- nav -->
    <div class="Home_nav">
      <ul>
        <li @click="rou(item)" v-for="(item, index) in HomeNav" :key="index">
          <img :src="item.Image" alt="" />
          <p>{{ item.title }}</p>
        </li>
      </ul>
    </div>
    <!-- HomeList -->
    <div style="margin-top: 95px" class="Home_List">
      <!--  -->
      <p class="famous_title">讲师推荐</p>
      <div class="famous_list" v-for="(i, k) in famous" :key="k">
        <div class="famous_left">
          <img :src="i.teacher_avatar" alt="" />
        </div>
        <div class="famous_right">
          <p>{{ i.teacher_name }}</p>
          <div>{{ i.introduction }}</div>
        </div>
      </div>
      <!--  -->
      <p class="famous_title">会员课程推荐</p>
      <div class="starTeacher_box">
        <div
          class="starTeacher_list"
          v-for="(ite, i) in starTeacher.list"
          :key="i"
        >
          <div class="starTeacher_content">
            <div>
              <p class="starTeacher_title">{{ ite.title }}</p>
              <p class="starTeacher_time">共{{ ite.total_periods }}课时</p>
            </div>
            <div class="starTeacher_text">
              <img :src="ite.teachers_list[0].teacher_avatar" alt="" />
              <p class="starTeacher_name">
                {{ ite.teachers_list[0].teacher_name }}
              </p>
            </div>
            <div class="bott">
              <p style="color: var(--themeColor)" class="left">
                {{ ite.course_type }}人已报名
              </p>
              <p style="color: #ee1f1f" class="right">
                <span style="color: hsl(56, 100%, 50%)">💰</span>1.00
              </p>
            </div>
          </div>
        </div>
      </div>
      <p class="famous_title">推荐课程</p>
      <div class="starTeacher_box">
        <div
          class="starTeacher_list"
          v-for="(item, index) in Boutique.list"
          :key="index"
        >
          <div class="starTeacher_content">
            <div>
              <p class="starTeacher_title">{{ item.title }}</p>
              <p class="starTeacher_time">共{{ item.total_periods }}课时</p>
            </div>
            <div class="starTeacher_text">
              <img :src="item.teachers_list[0].teacher_avatar" alt="" />
              <p class="starTeacher_name">
                {{ item.teachers_list[0].teacher_name }}
              </p>
            </div>
            <div class="bott">
              <p style="color: var(--themeColor)" class="left">
                {{ item.course_type }}人已报名
              </p>
              <p class="right">免费</p>
            </div>
          </div>
        </div>
      </div>
      <p class="famous_title">约课讲师</p>
      <div class="famous_list" v-for="(itt, ke) in tuiclass.list" :key="ke">
        <div class="famous_left">
          <img :src="itt.teacher_avatar" alt="" />
        </div>
        <div class="famous_right">
          <p>{{ itt.teacher_name }}</p>
          <div>{{ itt.introduction }}</div>
        </div>
      </div>
    </div>
    <!-- 卡片区域 -->
    <div class="cards">
      <div class="card-item">
        <span class="iconfont">&#xe633;</span>
        <div>特色课</div>
      </div>
      <div class="card-item">
        <span class="iconfont">&#xe638;</span>
        <div>一对一辅导</div>
      </div>
      <div class="card-item">
        <span class="iconfont">&#xe652;</span>
        <div>学习日历</div>
      </div>
    </div>
    <!-- 内容区域 -->
    <!-- <div class="main">
      <div class="content" v-for="(item,index) in navList" :key='index'>
        <div class="top">{{item.name}}</div>
        <div class="teacher" v-for="(items,indexs) in teacherList" :key='indexs'>
          {{items.title}}
          <div>{{items.teachers_list}}</div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
// 首页轮播图
// import { gy_banner, gy_infoList } from "@/utils/http";
import { BySwiper, ByHomeList, ByHomeDetail } from "@/utils/http";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      bannerList: [],
      navList: [],
      teacherList: [],
      Swiper_List: "", //轮播图
      HomeNav: [
        {
          Image:
            "",
          title: "特色课",
        },
        {
          Image:
            "",
          title: "一对一辅导",
        },
        {
          Image:
            "",
          title: "学习日历",
        },
      ], //主页nav数据
      catets: [], //Home总数据
      H_List: [], //获取标题数据
      famous: [], //获取明星讲师数据
      starTeacher: [], //名师阵容
      Boutique: [], //精品课程
      tuiclass: [], //推荐课程
      H_Listch0: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  created() {},
  mounted() {
    this.getBanner();
    this.getListInfo();
  },
  //方法集合
  methods: {
    async BySwiperList() {
      const res = await BySwiper();
      //   console.log(res);
      this.Swiper_List = res;
    },
    /////
    async ByHomeList() {
      const res = await ByHomeList();
      console.log(res);
      //获取明星讲师数据
      let arr = [];
      res.forEach((item) => {
        //   console.log(item.list)
        item.list.forEach((items) => {
          arr.push(items);
        });
      });
      var newarr2 = arr.slice(4);
      this.famous = newarr2;
      this.starTeacher = res[1];
      this.Boutique = res[0];
      this.tuiclass = res[3];
      console.log(res[3]);
    },
    rou(i) {
      console.log();
      if (i.title == "特色课") {
        this.$router.push("/Courses");
      }
    },
    async getListInfo() {
      const res = await gy_infoList();
      // console.log(res);
      res.forEach((item) => {
        this.navList.push(item.channel_info);
        item.list.forEach((items) => {
          this.teacherList.push(items);
        });
      });
      // console.log(this.navList);
      // console.log(this.teacherList);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let html = document.documentElement || document.body; // 兼容写法
    let WHeight = html.clientHeight; // 获取高
    let aside = document.querySelector(".Home_box"); // 获取标签
    aside.style.height = WHeight - (100 % +"px"); // 计算高
    window.addEventListener("resize", this.lhzadd);
    this.BySwiperList();
    this.ByHomeList();
    ByHomeDetail().then((res) => {
      console.log(res);
    });
    // ByHomeList().then(res=>{
    //     console.log(res);
    // })
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.Home_box {
  --themeColor: #8c8c8c;
  font-size: 12px;
  padding: 0;
  margin: 0;
  background: #f0f2f5;
  position: relative;
  padding-bottom: 50px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  height: 200px;
  img {
    width: 100%;
    height: 100%;
  }
}
.Home_nav {
  width: 100%;
  position: absolute;
  top: 176px;
  padding: 0 13px;
  ul {
    display: flex;
    justify-content: space-around;
    li {
      padding: 20px 0;
      width: 100px;
      height: 98px;
      border-radius: 10px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      justify-content: space-around;
      img {
        width: 20px;
        height: 20px;
      }
      p {
        color: var(--themeColor);
      }
    }
  }
}
.famous_title {
  font-size: 16px;
  border-left: 3px solid #eb6100;
  margin: 15px 10px;
  padding-left: 10px;
  height: 16px;
  line-height: 16px;
  color: #595959;
}
.famous_list_Item {
}
.famous_list {
  background: #fff;
  margin: 10px 10px;
  padding: 0 10px;
  border-radius: 8px;
  min-height: 81px;
  display: flex;
  align-items: center;
  .famous_left {
    margin-right: 10px;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  .famous_right {
    p {
      font-size: 15px;
      margin-bottom: 6px;
    }
    div {
      font-size: 12px;
      color: var(--themeColor);
    }
  }
}
.starTeacher_box {
  .starTeacher_list {
    background: #fff;
    margin: 10px 10px;
    padding: 10px 10px 0 10px;
    border-radius: 8px;
    min-height: 202px;
    display: flex;

    .starTeacher_content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      // justify-content: space-around;
      flex-direction: column;
      .starTeacher_title {
        font-size: 18px;
      }
      .starTeacher_time {
        font-size: 12px;
        color: var(--themeColor);
        line-height: 30px;
      }
      .starTeacher_text {
        display: flex;
        img {
          width: 27px;
          height: 27px;
          border-radius: 50%;
        }
        .starTeacher_name {
          font-size: 12px;
          color: var(--themeColor);
          line-height: 27px;
          margin-left: 10px;
        }
      }
      .bott {
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 43px;
        line-height: 43px;
        border-top: 1px solid var(--themeColor);
        .right {
          font-size: 17px;
          color: #44a426;
        }
      }
    }
  }
}
</style>
